<template>
<div class="mycomment">
<h1>详情</h1>
   <hr/>
   栏目名称:{{channel.name}}<br>
   栏目昵称:{{channel.nickname}}<br>
   栏目url:{{channel.url}}<br>
  栏目描述:<span v-html="channel.ms"></span><br>
   是否静态:{{channel.isStatic}}<br>
  <hr/>

  <div style="border: 1px solid #ccc">
    <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
    />
    <Editor
        style="height: 100px; overflow-y: hidden;"
        v-model="comment.content"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
    />
    <el-button type="success" @click="add()">保存</el-button>
  </div>


  <!--评论信息-->
  <div v-for="comment in comments">

    <el-avatar
        :src="comment.headerURL"
    />
      <span>{{comment.username}} </span> &nbsp;&nbsp; {{comment.createTime}}
    <br>
    <span v-html="comment.content"></span>
    <el-button @click="openReply(comment)">回复</el-button>
    <div v-if="comment.flag">
      <el-input v-model="reply.content" type="textarea" />
      <el-button @click="addReply"> 保存</el-button>
    </div>
    <br>
    <!--评论回复-->

    <div class="replyClass" v-for="reply in comment.replyList">
      <el-avatar
          :src="reply.headerURL"
      />
      <span>{{reply.username}} </span> &nbsp;&nbsp; {{reply.createTime}}
      <br>

      <span v-html="reply.content"></span>
      <el-button type="success" @click="openReply2(reply)"> 追加回复</el-button>
      <div v-if="reply.flag">
        <el-input v-model="reply2.content" type="textarea" />
        <el-button @click="addReply2"> 保存</el-button>
      </div>
    </div>

  </div>

</div>
</template>

<script lang="ts" setup>
import {reactive, inject, ref, onMounted} from 'vue'
import {ElMessage} from 'element-plus'
import {useRoute} from "vue-router";
import {getChannelDetailService} from "@/api/channel2";

//接收路由参数
let id=useRoute().query.id;
let channel=ref({});
let comments=ref([])
let comment =reactive({
  content:'',
  channelId:id
})

let reply= reactive({
  channelId:id,
  content:'',
  commentId:''

})


let reply2= reactive({
  channelId:id,
  content:'',
  commentId:''

})

const openReply2=(reply)=>{
  reply.flag=true;
  reply2.commentId= reply.commentId;
}

//显示回复框
let openReply=(comment)=>{
   comment.flag =true;//让回复框显示出来
  reply.commentId= comment.id;//将评论的id赋值给回复的评论id
}


//保存回复评论
const addReply= ()=>{
  addReplyService(reply).then(res=>{
    if(res.code ==200){
      ElMessage.success(res.msg);
      getCommentsByChannelId()
    }else{
      ElMessage.error(res.msg);
    }
  })
}



//保存回复评论
const addReply2= ()=>{
  addReplyService(reply2).then(res=>{
    if(res.code ==200){
      ElMessage.success(res.msg);
      getCommentsByChannelId()
    }else{
      ElMessage.error(res.msg);
    }
  })
}

const add=()=>{
  addCommentService(comment).then(res=>{
    if(res.code ==200){
      ElMessage.success(res.msg);
      //刷新评论
      getCommentsByChannelId()
    }else{

      ElMessage.error(res.msg);
      router.push("/")
    }
  })
}


//根据栏目id获取评论信息
const getCommentsByChannelId=()=>{
  getCommentByChannelIdService(id).then(res=>{
    console.log(res.data)
    comments.value=res.data;
  })
}


const  getChannelDetail=()=>{
  getChannelDetailService(id).then(res=>{
     channel.value=res.data;
  })
}

onMounted(()=>{
  getChannelDetail();
  getCommentsByChannelId()
})


import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import {addCommentService, addReplyService, getCommentByChannelIdService} from "@/api/comment";
import router from "@/router";
const mode=ref('default') // 或 'simple'

    // 编辑器实例，必须用 shallowRef
    const editorRef = shallowRef()

    // 内容 HTML
    const valueHtml = ref('<p>hello</p>')

    // 模拟 ajax 异步获取内容
    onMounted(() => {
      setTimeout(() => {
        valueHtml.value = ''
      }, 1500)
    })

    const toolbarConfig = {}
    const editorConfig = { placeholder: '请输入内容...' }

    // 组件销毁时，也及时销毁编辑器
    onBeforeUnmount(() => {
      const editor = editorRef.value
      if (editor == null) return
      editor.destroy()
    })

    const handleCreated = (editor) => {
      editorRef.value = editor // 记录 editor 实例，重要！
    }


</script>

<style>
.mycomment{
  margin-left: 400px;
  width: 450px;
}
.replyClass{
  margin-left: 40px;
}

</style>